<template>
  <div class="conMain">
    <el-card class="box-card">
      <div slot="header" class="topfix">
        <el-form :inline="true" :model="params" size="small" class="goodsForm" label-width="100px">
          <el-form-item label="ID">
            <el-input v-model="params.s_id" placeholder="请输入ID" />
          </el-form-item>
          <el-form-item label="所属渠道">
            <el-select v-model="params.s_from" placeholder="请选择">
              <el-option v-for="(item,index) in fromlist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品编码">
            <el-input v-model="params.s_product_code" placeholder="请输入商品编码" />
          </el-form-item>

          <el-form-item label="状态">
            <el-select v-model="params.s_status" placeholder="请选择">
              <el-option v-for="(item,index) in statuslist" :label="item.txt" :value="item.val" />
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" size="small" class="searchBtn" icon="el-icon-search" @click="handleSearch">搜索
            </el-button>
            <el-button type="info" plain @click="handleRet">重置</el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button v-has="'charge/goods/add'" type="primary" size="small" class="ml10" plain @click="add"><i
            class="el-icon-plus"
          /> 添加金额</el-button>
        </div>
      </div>
      <el-table v-loading="loading" :data="list" style="width: 100%" :empty-text="emtypetxt">

        <el-table-column prop="id" label="ID" align="center" width="100" />
        <el-table-column prop="from" label="所属渠道" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.from == 1">沃券充值</span>
            <span v-else-if="scope.row.from == 2">DR充值</span>
            <span v-else-if="scope.row.from == 3">新号吧充值</span>
          </template>
        </el-table-column>

        <el-table-column label="到账时效" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_fast === 1" size="mini" disable-transitions>快充</el-tag>
            <el-tag v-if="scope.row.is_fast === -1" type="info" size="mini" disable-transitions>慢充</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="type" label="运营商" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">中国联通</span>
            <span v-else-if="scope.row.type == 2">中国移动</span>
            <span v-else-if="scope.row.type == 3">中国电信</span>
          </template>
        </el-table-column>
        <el-table-column prop="product_code" label="商品编码" align="center" />
        <el-table-column prop="image" label="主图" align="center">
          <template slot-scope="scope">
            <el-image style="width:40px;height:40px" :src="scope.row.image" :preview-src-list="[scope.row.image]">
              <div slot="error" class="image-slot" />
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="price" label="话费面值" align="center" min-width="80" />
        <el-table-column prop="money" label="支付金额" align="center" min-width="80" />
        <el-table-column prop="fee" label="代理佣金" align="center" min-width="80" />

        <el-table-column prop="weigh" label="排序" align="center" />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success" size="mini" disable-transitions>上线</el-tag>
            <el-tag v-if="scope.row.status === -1" type="info" size="mini" disable-transitions>下线</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createtime" label="创建时间" align="center" width="200" />
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-link
              v-has="'charge/goods/edit'"
              :underline="false"
              type="primary"
              title="编辑"
              @click="edit(scope.row.id)"
            >编辑</el-link>
            <el-link
              v-has="'charge/goods/reset'"
              class="ml10"
              :underline="false"
              type="warning"
              title="佣金重置"
              @click="reset(scope.row)"
            >重置</el-link>

          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  goods_index,
  goods_add,
  goods_edit,
  goods_del,
  goods_reset
} from '@/api/charge'
export default {
  data() {
    return {
      total: 0,
      loading: true,
      emtypetxt: '',
      list: [],
      fromlist: [{
        val: '1',
        txt: '沃券充值'
      }, {
        val: '2',
        txt: 'DR充值'
      }, {
        val: '3',
        txt: '新号吧充值'
      }],
      statuslist: [{
        val: '1',
        txt: '上线'
      }, {
        val: '-1',
        txt: '下线'
      }],
      params: {
        s_id: '',
        s_from: '',
        s_product_code: '',
        s_status: '',
        page: 1,
        pagesize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.emtypetxt = '加载中...'
      this.loading = true
      goods_index(this.params).then(res => {
        this.list = res.data.list
        this.total = res.data.total
        this.loading = false
        if (this.list.length == 0) {
          this.emtypetxt = '暂无数据'
        }
      })
    },
    handleRet() {
      this.params = {
        s_id: '',
        s_from: '',
        s_product_code: '',
        s_status: '',
        page: 1
      },
      this.list = []
      this.getList()
    },
    handleSearch() {
      this.list = []
      this.params.page = 1
      this.getList()
    },
    // 分页
    handleSizeChange(val) {
      this.params.pagesize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getList()
    },
    add() {
      this.$modalForm(goods_add()).then(() => this.getList())
    },
    edit(id) {
      this.$modalForm(goods_edit({
        id: id
      })).then(() => this.getList())
    },

    // 佣金重置
    reset(row) {
      this.$prompt('修改所有一级代理该话费的佣金', '重置佣金', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9]*$/,
        inputErrorMessage: '金额不正确'
      }).then(({
        value
      }) => {
        if (value == null || value < 0) {
          this.$message.error('金额不正确')
          return
        }
        goods_reset({
          id: row.id,
          fee: value,
          type: 1
        }).then(res => {
          this.$message.success(res.msg)
          this.dialogVisible = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
